{extend name="user-layout" /}
{block name="content"}
<div class="content-wrapper">
    <div class="row">
        {include file="balance/info"}
        <div class="col-md-8 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <a style="float:right;" href="/assets/files//{$fileName}.xlsx">下载模版文件</a>
                    <h4 class="card-title">结算</h4>
                    <div class="tab-content tab-content-basic">
                        <div class="tab-pane fade show active" id="apply" role="tabpanel" aria-labelledby="apply-tab">
                            <form class="layui-form forms-sample" enctype="multipart/form-data"
                                action="{:url(\'index/Balance/withdraw\')}" method="post"
                                id="app-balance-withdraw-form">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">文件</label>
                                    <div class="col-sm-9">
                                        <input name="excel" lay-verify="excel" type="file" class="dropify"
                                            data-allowed-file-extensions="xls xlsx" data-max-file-size="1024kb" />
                                    </div>
                                </div>
                                <!-- <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">密码</label>
                                    <div class="col-sm-9">
                                        <input name="cashpwd" lay-verify="required" maxlength="20" autocomplete="new-password" type="password"
                                            class="layui-input" placeholder="请输入提现密码" />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">手机验证码</label>
                                    <div class="col-sm-9">
                                        <div class="input-group col-xs-12">
                                            <input style="font-size:1em;color:black;" type="text" name="vercode" required lay-verify="required" maxlength="6" class="form-control file-upload-info" placeholder="请输入手机验证码">
                                            <span class="input-group-append">
                                                <button type="button" id="sendVerCode" class="file-upload-browse btn-show-vercode btn btn-primary">发送</button>
                                            </span>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label"></label>
                                    <div class="col-sm-9">
                                        <button type="button" class="btn btn-primary btn-submit-balance-apply btn-fw"
                                            lay-submit lay-filter="app-balance-apply-submit">提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">结算记录</h4>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th style="width:200px;">单号</th>
                                    <th style="width:100px;">姓名</th>
                                    <th style="width:180px;">帐号</th>
                                    <th style="width:auto;">银行</th>
                                    <th style="width:120px;">金额</th>
                                    <th style="width:150px;">时间</th>
                                    <th style="width:100px;">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="list" id="vo"}
                                <tr>
                                    <td>{$vo.no}</td>
                                    <td>{$vo.user_name}</td>
                                    <td>{$vo.bank_account}</td>
                                    <td>{$vo.bank_name}</td>
                                    <td class="text-info text-right" title="{$vo.remarks}">{:number_format($vo.amount,2)}</td>
                                    <td>{$vo.update_time|date='Y/m/d H:i:s',###}</td>
                                    <td>
                                        {if condition="$vo.status == 1"}
                                        <button class="layui-btn layui-btn-primary layui-btn-xs">等待结算</button>
                                        {elseif condition="$vo.status == 2"/}
                                        <button class="layui-btn layui-btn-success layui-btn-xs">结算完毕</button>
                                        {elseif condition="$vo.status == 3"/}
                                        <button title="{$vo.reason}" class="layui-btn layui-btn-danger layui-btn-xs">结算被拒</button>
                                        {/if}
                                    </td>
                                </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                    {$list->render()}
                    {empty name="list"}
                    <div class="card" id="context-menu-multi">
                        <div class="card-body">
                            <p class="card-text text-center text-danger">
                                <i class="icon-compass"></i>
                                暂无数据...
                            </p>
                        </div>
                    </div>
                    {/empty}
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{/block}

{block name="pagejs"}

<script src="__STATIC__/cloudui/js/formpickers.js"></script>
<script>
    layui.use(['form', 'table'], function () {
        let $ = layui.$
            , form = layui.form
            , table = layui.table;

        //数据验证
        form.verify({
            excel: function (v) {
                if (v === "") {
                    return "请选择一个Excel的文件！";
                }
            }
        });
        //监听提交
        form.on('submit(app-balance-apply-submit)', function (data) {
            //提交
            $.ajax({
                url: '{:url(\'index/Balance/settlement\')}',
                method: "POST",
                cache: false,
                data: new FormData(data.form),
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code == 1) {
                        layer.alert(res.msg, { closeBtn: 0, shade: 0.6 }, function () {
                            layer.load(1, { shade: 0.6 });
                            location.href = "{:url(\'index/Balance/settlement\')}";
                        });
                    }
                    else {
                        layer.alert(res.msg, { icon: 2, closeBtn: 0, shade: 0.6 });
                    }
                }
            });
            return false;
        });

        $('.dropify').dropify({
            messages: {
                'default': '点击或拖拽文件到这里',
                'replace': '点击或拖拽文件到这里来替换文件',
                'remove': '移除文件',
                'error': '对不起，发生了未知错误',
            },
            error: {
                fileSize: "文件大小超过 ({{ value }}).",
                fileExtension: "文件类型不允许， ({{ value }})."
            }
        });
    });

</script>
{/block}